el

#el| 来源: 网络整理| 查看: 265

树结构在项目中其实还是比较常见的，本篇文章以饿了么UI中的el-tree组件为例，讲述一下树组件的懒加载的实现步骤。当然，顺带吐槽一下官方文档的案例写的不太接地气

问题描述

树组件如果数据比较多的话，一次性把整棵树的数据都请求到，略有耗时。所以为了优化性能，我们就要实现树组件懒加载的效果，也就是当我们点击树节点的时候，再去向后端发请求，获取对应点击的树节点下的数据。这样的话，点击哪里，加载哪里，性能会提高不少。

效果图

我们先看一下最终的成品效果图

懒加载前端代码 html部分 js部分 export default { data() { return { props: { label: "name", isLeaf: "isLeaf", }, }; }, methods: { loadNode(node, resolve) { //如果展开第一级节点，从后台加载一级节点列表 if (node.level == 0) { this.loadfirstnode(resolve); } //如果展开其他级节点，动态从后台加载下一级节点列表 if (node.level >= 1) { this.loadchildnode(node, resolve); } }, //加载第一级节点 async loadfirstnode(resolve) { let params = { level: 0, }; const res = await this.$api.getTreeData(params); return resolve(res.data); }, //加载节点的子节点集合 async loadchildnode(node, resolve) { // console.log("超过二级的", node, node.level); let params = { id: node.key, }; const res = await this.$api.getTreeChildData(params); return resolve(res.data); }, }, }; 思路分析首先，使用el-tree树组件必须指定lazy和load属性

lazy告知树组件开启懒加载模式，加上即可

load绑定的是一个函数，这个函数主要是用来在页面初始化加载的时候，用于向后端发请求获取el-tree的树结构的数据的。页面初始化加载，load绑定的函数会自动执行

注意，如果树组件开启了懒加载模式，就不用在el-tree组件标签中写:data="data属性了，因为load绑定的函数，有两个参数，node和resolve，node是树节点，而resolve又是一个函数，相当于高阶函数（函数柯里化）了，我们只需要把后端返回的数据（单层数组结构），放在这个函数里面，这个函数会自动把数据传递到树组件里面去，同时渲染视图

然后，我们需要和后端约定好传递的数据结构，即props中的配置

本例中是一个便于理解的简单el-tree的demo，所以就按照最简单的配置书写

data中的props中的label属性，就是平常指定的节点的名字，这个不赘述

data中的props中的isLeaf属性，指定的则是：是否是树组件中的叶子节点。什么是叶子节点？我们知道一棵树有很多分支（树枝），而树枝的末梢则是叶子，所以叶子节点就是树节点的最内层，最里层。所以，我们需要和后端沟通，让后端返回的树结构数据中，最内层数据加上isLeaf属性布尔值，为true就代表是最内层，为false，或者不加这个属性，就代表不是最内层。对应树组件的页面效果就是：为true的树组件，最内层不会有三角箭头。即到底了，没懒加载了

注意，因为树组件的懒加载是，点击树组件节点，加载下一层的数据，所以要和后端同事沟通，让后端接口数据不要一次性的返回整个树结构的数据，而是分层返回，点击那个树节点，树节点数据中会有id的，根据id发请求到后端，后端再把对应数据返回给前端，是数组结构的数据

接下来说说发请求这一块

因为树组件的load属性绑定的函数，初始化就会加载发请求，又因为树组件可以分为最外层和非最外层，所以在load绑定的函数中，本例是loadNode函数里面发请求，可以分两类：最外层和非最外层。（最外层level为0，非最外层levle大于0）所以就会有如下代码：

loadNode(node, resolve) { console.log('node节点数据记录了很多信息',node); console.log('resolve高阶函数给树组件赋值',node); //如果展开第一级节点，从后台加载一级节点列表（固定的） if (node.level == 0) { this.loadfirstnode(resolve); } //如果展开其他级节点，动态从后台加载下一级节点列表（可变的） if (node.level >= 1) { this.loadchildnode(node, resolve); } },

我们打印node参数和resolve参数，发现分别是树节点和一个函数，树节点记录了很多信息，其中就有树的层级

node参数打印效果图

resolve参数打印效果图

最后注意后端返回的数据结构

初始化加载最外层西游记和三国演义节点

点击西游记加载孙悟空、猪八戒、沙和尚节点

完整代码地址

附上Gitee完整代码，方便大家理解，里面分为简化版的el-tree和优化版的el-tree

gitee.com/ah-shuai/de…

【本文地址】

el

el

今日新闻

推荐新闻